﻿@charset "UTF-8";

//*******变量*******//
//文字
@ms: "Microsoft YaHei";   //微软雅黑
@song: SimSun;   //宋体
@arial: Arial;   //Arial
@tahoma: Tahoma;   //Tahoma

//自适应
@r: 1px;

//路径
@path: '../images/';

//*******函数*******//

// CSS键值对
.css(@key, @val){
    @{key}: if(isunit(@val,''),@val * @r,@val);
}
.css(@key, @v1, @v2){
    @{key}: if(isunit(@v1,''),@v1 * @r,@v1) if(isunit(@v2,''),@v2 * @r,@v2);
}
.css(@key, @v1, @v2, @v3){
    @{key}: if(isunit(@v1,''),@v1 * @r,@v1) if(isunit(@v2,''),@v2 * @r,@v2) if(isunit(@v3,''),@v3 * @r,@v3);
}
.css(@key, @v1, @v2, @v3, @v4){
    @{key}: if(isunit(@v1,''),@v1 * @r,@v1) if(isunit(@v2,''),@v2 * @r,@v2) if(isunit(@v3,''),@v3 * @r,@v3) if(isunit(@v4,''),@v4 * @r,@v4);
}



.fs(@fs:0){
    .css(font-size,@fs);
}
.fw(@fw:bold){
    font-weight: @fw;
}
.fst(@fStyle:italic){
    font-style: @fStyle;
}
.ff(@ff:@ms){
    font-family: @ff;
}
.ls(@size: 0){
    .css(letter-spacing,@size);
}
.c(@color:#fff){
    color: @color;
}
.tl(){
    text-align: left;
}
.tr(){
    text-align: right;
}
.tc(){
    text-align: center;
}
.tj(){
    text-align: justify;
}
.va(@pos:middle){
    .css(vertical-align,@pos);
}
.vert(@pos:middle){
    .va();
}
.lh(@h:1){
    line-height: @h;
}
.ti(@len: -9999px){
    .css(text-indent,@len);
}
.ms(){
    font-family: @ms;
}
.song(){
    font-family: @song;
}
.arial(){
    font-family: @arial;
}
.tahoma(){
    font-family: @tahoma;
}

/***** 图片 *****/
.obj(@fit:cover){
    object-fit: @fit;
}

/***** 浮动 *****/
.cb(){
    zoom: 1;
    &:after{
        content: "";
        display: block;
        overflow: hidden;
        clear: both;
    }
}
.clearboth(){
    .cb();
}
.fl(){
    float: left;
}
.fr(){
    float: right;
}
.fn(){
    float: none;
}

/***** 文字溢出省略 *****/
.ellipsis(){
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.el(){
    .ellipsis();
}
.m-el(@line:2){
    display: -webkit-box; /* autoprefixer: ignore next */-webkit-box-orient: vertical; -webkit-line-clamp: @line; overflow: hidden;
}

/***** display *****/
.bk(){
    display: block;
}
.il(){
    display: inline;
}
.ib(){
    display: inline-block;
}
.none(){
    display: none;
}

/***** flexbox *****/
.flex(){
  display: flex;
}
.flex-center(){
    .flex(); .jc-center(); .ai-center();
}

.iflex(){
    display: inline-flex;
}
.iflex-center(){
    .iflex(); .jc-center(); .ai-center();
}

.fd(@dir: column){
  flex-direction: @dir;
}

.fd-column(){
  flex-direction: column;
}

.fd-row(){
  flex-direction: row;
}

.jc(@pos:center){
  justify-content: @pos;
}
.jc-center(){
  justify-content: center;
}
.jc-start(){
  justify-content: flex-start;
}
.jc-end(){
  justify-content: flex-end;
}
.jc-around(){
  justify-content: space-around;
}
.jc-between(){
  justify-content: space-between;
}

.ai(@pos:center){
  align-items: @pos;
}
.ai-center(){
  align-items: center;
}
.ai-start(){
  align-items: flex-start;
}
.ai-end(){
  align-items: flex-end;
}
.ai-stretch(){
  align-items: stretch;
}

.fx(@num:1){
  flex: @num;
}

/***** opacity *****/
.opac(@val:0){
    opacity: @val;
}
.v(@val:hidden){
    visibility: @val;
}

/***** overflow *****/
.of(@val:hidden){
    overflow: @val;
}
.ofs(){
    .of(auto);
    -webkit-overflow-scrolling : touch;
}

/***** 定位 *****/
.abs(@left: 0,@top: 0){
    position: absolute;
    .css(left,@left);
    .css(top,@top);
}
.absR(@right: 0,@top: 0){
    position: absolute;
    .css(right,@right);
    .css(top,@top);
}
.absB(@left: 0,@bottom: 0){
    position: absolute;
    .css(left,@left);
    .css(bottom,@bottom);
}
.absRB(@right: 0,@bottom: 0){
    position: absolute;
    .css(right,@right);
    .css(bottom,@bottom);
}
.fixed(@left: 0,@top: 0){
    position: fixed;
    .css(left,@left);
    .css(top,@top);
}
.fixedR(@right: 0,@top: 0){
    position: fixed;
    .css(right,@right);
    .css(top,@top);
}
.fixedB(@left: 0,@bottom: 0){
    position: fixed;
    .css(left,@left);
    .css(bottom,@bottom);
}
.fixedRB(@right: 0,@bottom: 0){
    position: fixed;
    .css(right,@right);
    .css(bottom,@bottom);
}
.rel(){
    position: relative;
}
.static(){
    position: static;
}
.zi(@num: 0){
  z-index: @num;
}
.zIndex(@num: 0){
    z-index: @num;
}

/***** 居中定位 *****/
.centerT(@top:0,@left:0,@right:0){
    position: absolute;
    .css(top,@top);
    .css(left,@left);
    .css(right,@right);
    .m(auto);
}
.centerB(@bottom:0,@left:0,@right:0) {
    position: absolute;
    .css(bottom,@bottom);
    .css(left,@left);
    .css(right,@right);
    .m(auto);
}
.centerL(@left:0,@top:0,@bottom:0){
    position: absolute;
    .css(left,@left);
    .css(top,@top);
    .css(bottom,@bottom);
    .m(auto);
}
.centerR(@right:0,@top:0,@bottom:0){
    position: absolute;
    .css(right,@right);
    .css(top,@top);
    .css(bottom,@bottom);
    .m(auto);
}
.center(@len: 0){
    position: absolute;
    .css(top,@len);
    .css(bottom,@len);
    .css(left,@len);
    .css(right,@len);
    .m(auto);
}
.fcenter(@len: 0){
    position: fixed;
    .css(top,@len);
    .css(bottom,@len);
    .css(left,@len);
    .css(right,@len);
    .m(auto);
}
.fcenterT(@top:0,@left:0,@right:0){
  position: fixed;
  .css(top,@top);
  .css(left,@left);
  .css(right,@right);
  .m(auto);
}
.fcenterB(@bottom:0,@left:0,@right:0){
  position: fixed;
  .css(bottom,@bottom);
  .css(left,@left);
  .css(right,@right);
  .m(auto);
}

/***** CSS3 *****/
.transition(@time: .3, @fun: ease, @name: all){
    transition: @name if(isunit(@time,''),@time * 1s,@time) @fun;
}
.tdelay(@time:0){
    transition-delay: if(isunit(@time,''),@time * 1s,@time);
}
.origin(@x:50%,@y:50%){
    .css(transform-origin,@x,@y);
}
.translate(@x:0,@y:0){
    transform: translate(if(isunit(@x,''),@x * @r,@x),if(isunit(@y,''),@y * @r,@y));
}
.translateY(@len:0){
    transform: translateY(if(isunit(@len,''),@len * @r,@len));
}
.translateZ(@len:0){
    transform: translateZ(if(isunit(@len,''),@len * @r,@len));
}
.scale(@times:0){
    transform: scale(@times);
}
.rotate(@deg:0){
    transform: rotate(if(isunit(@deg,''),@deg * 1deg,@deg));
}
.rotateX(@deg:0){
    transform: rotateX(if(isunit(@deg,''),@deg * 1deg,@deg));
}
.rotateY(@deg:0){
    transform: rotateY(if(isunit(@deg,''),@deg * 1deg,@deg));
}
.anim(@name,@time,@timing:ease,@count:infinite){
    animation: @name if(isunit(@time,''),@time * 1s,@time) @timing @count;
}
.adelay(@time:0){
    transition-delay: if(isunit(@time,''),@time * 1s,@time);
}
.skew(@x:0,@y:0){
    transform: skew(if(isunit(@x,''),@x * 1deg,@x),if(isunit(@y,''),@y * 1deg,@y));
}
.skewY(@deg:0){
    transform: skewY(if(isunit(@deg,''),@deg * 1deg,@deg));
}

/***** 边框 *****/
.b(@len:0,@color:#eee,@type:solid){
    .css(border,@len,@color,@type);
}
.bl(@len:0,@color:#eee,@type:solid){
    .css(border-left,@len,@color,@type);
}
.br(@len:0,@color:#eee,@type:solid){
    .css(border-right,@len,@color,@type);
}
.bt(@len:0,@color:#eee,@type:solid){
    .css(border-top,@len,@color,@type);
}
.bb(@len:0,@color:#eee,@type:solid){
    .css(border-bottom,@len,@color,@type);
}
.brs(@len:100%){  //边角弧度
    .css(border-radius,@len);
}
.brs(@lt,@rt){  //边角弧度
    .css(border-radius,@lt,@rt);
}
.brs(@lt,@rt,@rb){  //边角弧度
    .css(border-radius,@lt,@rt,@rb);
}
.brs(@lt,@rt,@rb,@lb){  //边角弧度
    .css(border-radius,@lt,@rt,@rb,@lb);
}
.bxs(@val: border-box){
    box-sizing: @val;
}

/***** 阴影 *****/
.bs(@len,@color){
    box-shadow: 0 0 if(isunit(@len,''),@len * 1deg,@len) @color;
}
.bsi(@len,@color){
    box-shadow: inset 0 0 if(isunit(@len,''),@len * 1deg,@len) @color;
}

/***** 宽高 *****/
.w(@w:100%){
    .css(width,@w);
}
.vw(@w: 100){
    .w(@w * 1vw);
}
.minW(@w: 100%){
    .css(min-width,@w);
}
.minw(@w: 100%){
    .minW(@w);
}
.maxW(@w: 100%){
    .css(max-width,@w);
}
.maxw(@w: 100%){
    .maxW(@w);
}
.h(@h:100%){
    .css(height,@h);
}
.vh(@h: 100){
    .h(@h * 1vh);
}
.minH(@h: 100%){
    .css(min-height,@h);
}
.minh(@h: 100%){
    .minH(@h);
}
.maxH(@h: 100%){
    .css(max-height,@h);
}
.maxh(@h: 100%){
    .maxH(@h);
}
.wh(@w:100%){
    .w(@w); .h(@w);
}
.wh(@w,@h){
    .w(@w); .h(@h);
}
.vwh(@w:100){
    .vw(@w); .vh(@w);
}
.vwh(@w,@h){
    .vw(@w); .vh(@h);
}

/***** 内外边距 *****/
.m(@m:0){
    .css(margin,@m);
}
.m(@m1,@m2){
    .css(margin,@m1,@m2);
}
.m(@m1,@m2,@m3){
    .css(margin,@m1,@m2,@m3);
}
.m(@m1,@m2,@m3,@m4){
    .css(margin,@m1,@m2,@m3,@m4);
}

.ml(@ml:0){
    .css(margin-left,@ml);
}
.mr(@mr:0){
    .css(margin-right,@mr);
}
.mt(@mt:0){
    .css(margin-top,@mt);
}
.mb(@mb:0){
    .css(margin-bottom,@mb);
}

.p(@p:0){
    .css(padding,@p);
}
.p(@p1,@p2){
    .css(padding,@p1,@p2);
}
.p(@p1,@p2,@p3){
    .css(padding,@p1,@p2,@p3);
}
.p(@p1,@p2,@p3,@p4){
    .css(padding,@p1,@p2,@p3,@p4);
}
.pl(@pl:0){
    .css(padding-left,@pl);
}
.pr(@pr:0){
    .css(padding-right,@pr);
}
.pt(@pt:0){
    .css(padding-top,@pt);
}
.pb(@pb:0){
    .css(padding-bottom,@pb);
}

/***** 背景 *****/
/////// PNG
.bg(@name){
    background: url('@{path}@{name}.png') no-repeat center;
    .bgs();
}
.bg(@name,@l){
    background: url('@{path}@{name}.png') no-repeat if(isunit(@l,''),@l * @r,@l) center;
    .bgs();
}
.bg(@name,@l,@t){
    background: url('@{path}@{name}.png') no-repeat if(isunit(@l,''),@l * @r,@l) if(isunit(@t,''),@t * @r,@t);
    .bgs();
}

.bgx(@name){
    background: url('@{path}@{name}.png') repeat-x center;
    .bgs();
}
.bgx(@name,@l){
    background: url('@{path}@{name}.png') repeat-x if(isunit(@l,''),@l * @r,@l) center;
    .bgs();
}
.bgx(@name,@l,@t){
    background: url('@{path}@{name}.png') repeat-x if(isunit(@l,''),@l * @r,@l) if(isunit(@t,''),@t * @r,@t);
    .bgs();
}

.bgy(@name){
    background: url('@{path}@{name}.png') repeat-y center;
    .bgs();
}
.bgy(@name,@l){
    background: url('@{path}@{name}.png') repeat-y if(isunit(@l,''),@l * @r,@l) center;
    .bgs();
}
.bgy(@name,@l,@t){
    background: url('@{path}@{name}.png') repeat-y if(isunit(@l,''),@l * @r,@l) if(isunit(@t,''),@t * @r,@t);
    .bgs();
}

/////// JPEG
.bgj(@name){
    background: url('@{path}@{name}.jpg') no-repeat center;
    .bgs();
}
.bgj(@name,@l){
    background: url('@{path}@{name}.jpg') no-repeat if(isunit(@l,''),@l * @r,@l) center;
    .bgs();
}
.bgj(@name,@l,@t){
    background: url('@{path}@{name}.jpg') no-repeat if(isunit(@l,''),@l * @r,@l) if(isunit(@t,''),@t * @r,@t);
    .bgs();
}

.bgjx(@name){
    background: url('@{path}@{name}.jpg') repeat-x center;
    .bgs();
}
.bgjx(@name,@l){
    background: url('@{path}@{name}.jpg') repeat-x if(isunit(@l,''),@l * @r,@l) center;
    .bgs();
}
.bgjx(@name,@l,@t){
    background: url('@{path}@{name}.jpg') repeat-x if(isunit(@l,''),@l * @r,@l) if(isunit(@t,''),@t * @r,@t);
    .bgs();
}

.bgjy(@name){
    background: url('@{path}@{name}.jpg') repeat-y center;
    .bgs();
}
.bgjy(@name,@l){
    background: url('@{path}@{name}.jpg') repeat-y if(isunit(@l,''),@l * @r,@l) center;
    .bgs();
}
.bgjy(@name,@l,@t){
    background: url('@{path}@{name}.jpg') repeat-y if(isunit(@l,''),@l * @r,@l) if(isunit(@t,''),@t * @r,@t);
    .bgs();
}

.bgc(@color:#fff){
    background-color: @color;
}
.bgs(@size:100%){
    .css(background-size,@size);
}

.bgImg(@name){
    background-image: url('@{path}@{name}.png');
}
.bgimg(@name){
    .bgImg(@name);
}
.bgjImg(@name){
    background-image: url('@{path}@{name}.jpg');
}
.bgjimg(@name){
    .bgjImg(@name);
}

/***** 鼠标样式 *****/
.cr(@cursor:pointer){
    cursor: @cursor;
}

/***** 伪元素 *****/
.ct(@content:''){
    content: @content;
}

/***** 表单 *****/
.placeholder(@color:#c8c8c8){
    :-moz-placeholder { color: @color;}
    ::-webkit-input-placeholder { color: @color;}
    :-ms-input-placeholder{ color: @color;}
}

.pe(@val: none){
    pointer-events: @val;
}

